 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
 </head>

 <body>
     <div id="app">
         <div >
            <!-- {{item.firstname+' '+item.lastname}} -->
            {{fullName()}}
         </div>
     </div>
     <script src="../lib/Vue.js"></script>
     <script>
         const app = Vue.createApp({
             data: function () {
                 return {
                    //  friends: {
                    //      kobe: {
                    //          firstname: "kobe",
                    //          lastname: "bryankt"
                    //      },
                    //      james: {
                    //          firstname: "lebron",
                    //          lastname: "james"
                    //      },
                    //      curry: {
                    //          firstname: "steven",
                    //          lastname: "curry"
                    //      }
                    //  }

                    firstname:"kobe",
                    lastname:"bryant"
                 }
             },
             methods: {
                 fullName()
                 {
                    return this.firstname+" "+this.lastname;
                 }
             },
             //计算属性
             computed:{
                // fullName(item)
                // {
                //    return this.firstname+" "+this.lastname; 
                // }
             }
         });
         app.mount("#app");
     </script>
 </body>

 </html>